<template>
	<Row type="flex" :gutter="10">
		<Col>
		<div class="box">
			{{ box.a }} : {{ box.b }}
		</div>
		</Col>
		<Col>
		<div class="box">
			{{ box.a }} : {{ box.b }}
		</div>
		</Col>
	</Row>
	<Row class="grid">
		<Col>
		<div class="box">
			{{ box.a }} : {{ box.b }}
		</div>
		</Col>
		<Col>
		<div class="box">
			{{ box.a }} : {{ box.b }}
		</div>
		</Col>
		<Col>
		<div class="box">
			{{ box.a }} : {{ box.b }}
		</div>
		</Col>
	</Row>
	<Row>
		<Button type="default" @click="add">操作</Button>
	</Row>
	<Row :gutter="10">
		<Col span="12">
		<div class="box"></div>
		</Col>
		<Col span="12">
		<div class="box"></div>
		</Col>
	</Row>
	<div id="div"></div>
</template>
<script lang="jsx">
import { h, render } from 'vue'
export default {
	name: 'myBoxTest',
	data() {
		return {
			a: 1,
			b: 2,
			box: {
				a: 1,
				b: 2
			}
		}
	},
	methods: {
		add() {
			this.box.a++;
			let div = h('div', {
				class: 'myword',
				style: {
					color: 'red'
				},
				type: 3,
				onClick() {
					alert(1);
				}
			}, [
				h('a', '内容')
			])
			div = h('Button', {
				onClick: () => {
					alert(1);
				},
				type: 'default'
			}, '内容');
			render(div, document.getElementById('div'));
		}
	},
	mounted() {
		this.add();
	}
}
</script>
<style lang="scss" scoped>
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	.ivu-col {
		justify-self: center;
		.box {
			margin: 0 auto;
		}
	}
}
</style>